<template>
  <div class="settings-page">
    <div class="settings-container">
      <!-- 左侧导航 -->
      <div class="sidebar">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="basic">
            <el-icon><Setting /></el-icon>
            <span>基础配置</span>
          </el-menu-item>
          <el-menu-item index="personal">
            <el-icon><User /></el-icon>
            <span>个人信息</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧内容 -->
      <div class="main-content">
        <!-- 基础配置 -->
        <div v-if="activeMenu === 'basic'" class="settings-section">
          <div class="section-header">
            <h3>基础配置</h3>
            <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
          </div>

          <div class="settings-content">
            <!-- 预约设置 -->
            <div class="setting-item">
              <div class="setting-header">
                <h4>预约设置</h4>
              </div>
              <div class="setting-body">
                <div class="setting-row">
                  <span class="setting-label">状态:</span>
                  <el-switch
                    v-model="basicSettings.reservation.enabled"
                    active-text="已开启预约服务"
                    inactive-text="已关闭预约服务"
                    @change="handleReservationChange"
                  />
                </div>
                <div v-if="basicSettings.reservation.enabled" class="setting-details">
                  <el-form :model="basicSettings.reservation" label-width="120px">
                    <el-form-item label="最大预约天数:">
                      <el-input-number
                        v-model="basicSettings.reservation.maxDays"
                        :min="1"
                        :max="30"
                        controls-position="right"
                      />
                    </el-form-item>
                    <el-form-item label="预约时间段:">
                      <el-time-picker
                        v-model="basicSettings.reservation.startTime"
                        placeholder="开始时间"
                        format="HH:mm"
                        value-format="HH:mm"
                      />
                      <span class="time-separator">至</span>
                      <el-time-picker
                        v-model="basicSettings.reservation.endTime"
                        placeholder="结束时间"
                        format="HH:mm"
                        value-format="HH:mm"
                      />
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>

            <!-- 取号设置 -->
            <div class="setting-item">
              <div class="setting-header">
                <h4>取号设置</h4>
              </div>
              <div class="setting-body">
                <div class="setting-row">
                  <span class="setting-label">状态:</span>
                  <el-switch
                    v-model="basicSettings.queue.enabled"
                    active-text="已开启取号服务"
                    inactive-text="已关闭取号服务"
                    @change="handleQueueChange"
                  />
                </div>
                <div v-if="basicSettings.queue.enabled" class="setting-details">
                  <el-form :model="basicSettings.queue" label-width="120px">
                    <el-form-item label="最大排队人数:">
                      <el-input-number
                        v-model="basicSettings.queue.maxQueue"
                        :min="10"
                        :max="1000"
                        controls-position="right"
                      />
                    </el-form-item>
                    <el-form-item label="叫号间隔(分钟):">
                      <el-input-number
                        v-model="basicSettings.queue.callInterval"
                        :min="1"
                        :max="60"
                        controls-position="right"
                      />
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>

            <!-- 打烊设置 -->
            <div class="setting-item">
              <div class="setting-header">
                <h4>打烊设置</h4>
              </div>
              <div class="setting-body">
                <div class="setting-row">
                  <span class="setting-label">状态:</span>
                  <el-switch
                    v-model="basicSettings.closing.enabled"
                    active-text="正常营业"
                    inactive-text="已打烊"
                    @change="handleClosingChange"
                  />
                </div>
                <div v-if="!basicSettings.closing.enabled" class="setting-details">
                  <el-form :model="basicSettings.closing" label-width="120px">
                    <el-form-item label="打烊原因:">
                      <el-input
                        v-model="basicSettings.closing.reason"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入打烊原因"
                      />
                    </el-form-item>
                    <el-form-item label="预计恢复时间:">
                      <el-date-picker
                        v-model="basicSettings.closing.recoveryTime"
                        type="datetime"
                        placeholder="选择恢复营业时间"
                        format="YYYY-MM-DD HH:mm"
                        value-format="YYYY-MM-DD HH:mm"
                      />
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>

            <!-- 系统参数设置 -->
            <div class="setting-item">
              <div class="setting-header">
                <h4>系统参数</h4>
              </div>
              <div class="setting-body">
                <el-form :model="basicSettings.system" label-width="120px">
                  <el-form-item label="订单超时时间:">
                    <el-input-number
                      v-model="basicSettings.system.orderTimeout"
                      :min="5"
                      :max="60"
                      controls-position="right"
                    />
                    <span class="unit-text">分钟</span>
                  </el-form-item>
                  <el-form-item label="自动取消时间:">
                    <el-input-number
                      v-model="basicSettings.system.autoCancelTime"
                      :min="10"
                      :max="120"
                      controls-position="right"
                    />
                    <span class="unit-text">分钟</span>
                  </el-form-item>
                  <el-form-item label="最大折扣率:">
                    <el-input-number
                      v-model="basicSettings.system.maxDiscount"
                      :min="0.1"
                      :max="1"
                      :step="0.1"
                      controls-position="right"
                    />
                    <span class="unit-text">折</span>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人信息 -->
        <div v-else-if="activeMenu === 'personal'" class="settings-section">
          <div class="section-header">
            <h3>个人信息</h3>
            <el-button type="primary" @click="savePersonalInfo">保存信息</el-button>
          </div>

          <div class="settings-content">
            <el-form
              ref="personalFormRef"
              :model="personalInfo"
              :rules="personalRules"
              label-width="120px"
              class="personal-form"
            >
              <el-form-item label="头像:">
                <div class="avatar-upload">
                  <el-avatar
                    :size="80"
                    :src="personalInfo.avatar"
                    @error="handleAvatarError"
                  />
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                  >
                    <el-button size="small" type="primary">更换头像</el-button>
                  </el-upload>
                </div>
              </el-form-item>

              <el-form-item label="员工姓名:" prop="name">
                <el-input
                  v-model="personalInfo.name"
                  placeholder="请输入员工姓名"
                  style="width: 300px"
                />
              </el-form-item>

              <el-form-item label="员工ID:" prop="employeeId">
                <el-input
                  v-model="personalInfo.employeeId"
                  placeholder="请输入员工ID"
                  style="width: 300px"
                  disabled
                />
              </el-form-item>

              <el-form-item label="手机号码:" prop="phone">
                <el-input
                  v-model="personalInfo.phone"
                  placeholder="请输入手机号码"
                  style="width: 300px"
                />
              </el-form-item>

              <el-form-item label="邮箱地址:" prop="email">
                <el-input
                  v-model="personalInfo.email"
                  placeholder="请输入邮箱地址"
                  style="width: 300px"
                />
              </el-form-item>

              <el-form-item label="所属部门:" prop="department">
                <el-select
                  v-model="personalInfo.department"
                  placeholder="请选择部门"
                  style="width: 300px"
                >
                  <el-option label="前厅部" value="前厅部" />
                  <el-option label="后厨部" value="后厨部" />
                  <el-option label="收银部" value="收银部" />
                  <el-option label="管理部" value="管理部" />
                </el-select>
              </el-form-item>

              <el-form-item label="职位:" prop="position">
                <el-input
                  v-model="personalInfo.position"
                  placeholder="请输入职位"
                  style="width: 300px"
                />
              </el-form-item>

              <el-form-item label="入职时间:" prop="hireDate">
                <el-date-picker
                  v-model="personalInfo.hireDate"
                  type="date"
                  placeholder="选择入职时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 300px"
                />
              </el-form-item>

              <el-form-item label="个人简介:" prop="bio">
                <el-input
                  v-model="personalInfo.bio"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入个人简介"
                  style="width: 400px"
                />
              </el-form-item>
            </el-form>

            <!-- 修改密码 -->
            <div class="password-section">
              <h4>修改密码</h4>
              <el-form
                ref="passwordFormRef"
                :model="passwordForm"
                :rules="passwordRules"
                label-width="120px"
                class="password-form"
              >
                <el-form-item label="当前密码:" prop="currentPassword">
                  <el-input
                    v-model="passwordForm.currentPassword"
                    type="password"
                    placeholder="请输入当前密码"
                    style="width: 300px"
                    show-password
                  />
                </el-form-item>

                <el-form-item label="新密码:" prop="newPassword">
                  <el-input
                    v-model="passwordForm.newPassword"
                    type="password"
                    placeholder="请输入新密码"
                    style="width: 300px"
                    show-password
                  />
                </el-form-item>

                <el-form-item label="确认新密码:" prop="confirmPassword">
                  <el-input
                    v-model="passwordForm.confirmPassword"
                    type="password"
                    placeholder="请再次输入新密码"
                    style="width: 300px"
                    show-password
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="changePassword">修改密码</el-button>
                  <el-button @click="resetPasswordForm">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const activeMenu = ref('basic')
const personalFormRef = ref()
const passwordFormRef = ref()

// 基础配置设置
const basicSettings = ref({
  reservation: {
    enabled: true,
    maxDays: 7,
    startTime: '09:00',
    endTime: '21:00'
  },
  queue: {
    enabled: true,
    maxQueue: 100,
    callInterval: 5
  },
  closing: {
    enabled: true,
    reason: '',
    recoveryTime: ''
  },
  system: {
    orderTimeout: 30,
    autoCancelTime: 60,
    maxDiscount: 0.8
  }
})

// 个人信息
//todo
const personalInfo = ref({
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  name: '李思思',
  employeeId: '112658',
  phone: '13800138000',
  email: 'lisi@example.com',
  department: '前厅部',
  position: '服务员',
  hireDate: '2023-01-15',
  bio: '热爱餐饮行业，有3年服务经验，擅长客户沟通和团队协作。'
})

// 修改密码表单
const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单验证规则
const personalRules = {
  name: [
    { required: true, message: '请输入员工姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  department: [
    { required: true, message: '请选择所属部门', trigger: 'change' }
  ],
  position: [
    { required: true, message: '请输入职位', trigger: 'blur' }
  ],
  hireDate: [
    { required: true, message: '请选择入职时间', trigger: 'change' }
  ]
}

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 方法
const handleMenuSelect = (key) => {
  activeMenu.value = key
}

const handleReservationChange = (value) => {
  if (value) {
    ElMessage.success('预约服务已开启')
  } else {
    ElMessage.warning('预约服务已关闭')
  }
}

const handleQueueChange = (value) => {
  if (value) {
    ElMessage.success('取号服务已开启')
  } else {
    ElMessage.warning('取号服务已关闭')
  }
}

const handleClosingChange = (value) => {
  if (value) {
    ElMessage.success('已恢复正常营业')
  } else {
    ElMessage.warning('已设置打烊状态')
  }
}

const saveBasicSettings = () => {
  ElMessage.success('基础配置保存成功')
}

const savePersonalInfo = async () => {
  if (!personalFormRef.value) return
  
  try {
    await personalFormRef.value.validate()
    ElMessage.success('个人信息保存成功')
  } catch (error) {
    console.log('表单验证失败', error)
  }
}

const changePassword = async () => {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    
    // 这里添加修改密码的逻辑
    ElMessage.success('密码修改成功')
    resetPasswordForm()
  } catch (error) {
    console.log('表单验证失败', error)
  }
}

const resetPasswordForm = () => {
  passwordForm.value = {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
  if (passwordFormRef.value) {
    passwordFormRef.value.resetFields()
  }
}

const handleAvatarError = () => {
  personalInfo.value.avatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
}

const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('头像只能是 JPG 或 PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB!')
  }

  if (isJPG && isLt2M) {
    // 这里可以添加实际上传逻辑
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (e) => {
      personalInfo.value.avatar = e.target.result
    }
  }

  return false
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.settings-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.settings-container {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.sidebar-menu {
  border-right: none;
}

.main-content {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.section-header h3 {
  margin: 0;
  color: #303133;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.setting-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.setting-header {
  background: #f5f7fa;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.setting-header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.setting-body {
  padding: 20px;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.setting-label {
  font-weight: 500;
  color: #303133;
  min-width: 80px;
}

.setting-details {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.time-separator {
  margin: 0 12px;
  color: #909399;
}

.unit-text {
  margin-left: 8px;
  color: #909399;
}

.personal-form {
  max-width: 600px;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar-uploader {
  display: inline-block;
}

.password-section {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e4e7ed;
}

.password-section h4 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 16px;
}

.password-form {
  max-width: 600px;
}
</style> 